<template>
  <el-row  :gutter="20">
    <el-col
      v-for="{ svgName, number, size= '50px', unit, subTitle, iconColor } in list"
      :key="svgName"
      :span="6"
      gutter="20"
    >
      <el-card class="mb-30px">
        <div class="flex">
          <SvgIcon
            class="ml-5px cursor-pointer"
            :name="svgName"
            :color="iconColor"
            :width="size"
            :height="size"
          />
          <div class="ml-5px">
            <div class="flex flex-items-center mb-6px  ml-10px">
              <p class="text-30px font-600">{{ number }}</p>
              <p class="text-14px">{{ unit }}</p>
            </div>
            <p class="text-14px text-#999 ml-10px">{{ subTitle }}</p>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  }
})
</script>
<style scoped></style>
